<%@ include file="/common/taglibs.jsp"%>
<head>
<link type="text/css" href="/css/smoothness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<link type="text/css" href="/css/stdskin.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.11.custom.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
// 	$('#sectionTabs').tabs();
	$("#submitButton").click(function() {
		loadAttrs();		
		$("#exchangeForm").submit();
	});
	$("#validationButton").click(function() {
		loadAttrs();		
		$("#validationForm").submit();
	});
	
});
function newAttr() {
	var newRaw = $("<tr></tr>");
	newRaw.append("<td xmlns:field='rdm'><input type='text' name='rdms'/></td>");
	newRaw.append("<td xmlns:field='pk'><input type='checkbox'/></td>");
	newRaw.append("<td xmlns:field='trans'><input type='checkbox' checked='checked'/></td>");
	
	newRaw.append("<td xmlns:field='sender'><select><option value='COLUMN'>Column</option><option value='DEFAULT'>Default</option></select><input type='text' name='senders'/></td>");
	
	newRaw.append("<td xmlns:field='receiver'><input type='text' name='receivers'/></td>");
	newRaw.append("<td xmlns:field='required'><input type='checkbox' checked='checked'/></td>");
	newRaw.append("<td xmlns:field='filter'><input type='text' name='filters'/></td>");
	newRaw.append("<td xmlns:field='action'><button onclick='removeAttr(this)'>Remove</button></td>");
	newRaw.append("<td xmlns:field='comment'><input type='text' name='comments'/></td>");
	$("#attrTable").append(newRaw);
	
}
function removeAttr(row) {
	$(row).parent("td").parent("tr").remove();
}
function loadAttrs() {
	$("#attrTable tr:not(:first)").each(function() {
		$(this).find("td").each(function() {
			var col = $(this).attr("xmlns:field");
			switch (col) {
			// text
// 			case "rdm":
// 			case "receiver":
// 			case "filter":
// 			case "comment":
// 				addAttr(col, $(this).find("input:text").val());
// 				break;
			// checkbox
			case "pk":
			case "trans":
			case "required":
				addAttr(col, $(this).find("input:checkbox").is(":checked")?"true":"false");
				break;
			// special
			case "sender":
				addAttr("senderType", $(this).find("select option:selected").val());
// 				addAttr("sender", $(this).find("input:text").val());
				break;
				
			}
		});
	});
}
function addAttr(attr, value) {
	$("#input_"+attr).val($("#input_"+attr).val()+encodeURIComponent(value)+"&");
}
</script>

</head>

<body>

<form:form commandName="exchangeMapping" method="post" action="/open/exchangeMapping/save" id="exchangeForm">
	<form:hidden path="id"/>
	<input type="hidden" name="input_rdm" id="input_rdm"/>
	<input type="hidden" name="input_pk" id="input_pk"/>
	<input type="hidden" name="input_trans" id="input_trans"/>
	<input type="hidden" name="input_senderType" id="input_senderType"/>
	<input type="hidden" name="input_sender" id="input_sender"/>
	<input type="hidden" name="input_receiver" id="input_receiver"/>
	<input type="hidden" name="input_required" id="input_required"/>
	<input type="hidden" name="input_filter" id="input_filter"/>
	<input type="hidden" name="input_comment" id="input_comment"/>
	
	<div id="sectionTabs">
<!-- 		<ul> -->
<!-- 			<li><a href="#exchangeTab">Exchange</a></li> -->
<!-- 			<li><a href="#attributeTab">Attributes</a></li> -->
<!-- 		</ul> -->
	
	
	<div id="exchangeTab">
	
	<table>
		<tr><td>Revision: <form:input path="revision" id="revision" maxlength="50"/></td>
			<td>Issue with Sender <input type="checkbox"></td>
			<td>Issue with Receiver <input type="checkbox"></td>
		</tr>
	</table>
	<table>
		<tr><td>Document Id</td><td>Exchange Id</td><td>Commodity</td></tr>
		<tr><td><form:input path="docId" id="docId" maxlength="50"/></td>
			<td><form:input path="exId" id="exId" maxlength="50"/></td>
			<td><form:input path="commodity" id="commodity" maxlength="50"/></td></tr>
		
		<tr><td>Sending App</td><td></td><td>Receiving App</td></tr>
		<tr><td><form:input path="sender" id="sender" maxlength="50"/></td>
			<td></td>
			<td><form:input path="receiver" id="receiver" maxlength="50"/></td>
			</tr>
		<tr><td>Table Out</td><td></td><td>Table In</td></tr>
		<tr><td><form:input path="fromTable" id="fromTable" maxlength="50"/></td>
			<td></td>
			<td><form:input path="toTable" id="toTable" maxlength="50"/> </td>
			</tr>
		<tr><td colspan="3">Note</td></tr>
		<tr><td colspan="3"><form:textarea path="note" rows="4" cssStyle="width:500px"/></td></tr>
		<tr><td colspan="3">Comment</td></tr>
		<tr><td colspan="3"><form:textarea path="comment" rows="4" cssStyle="width:500px"/></td></tr>
	</table>
	
	</div>
	
	<div id="attributeTab">
	
	<table id="attrTable" class="contentTable">
		<tr>
			<td>RDM</td>
			<td>PK</td>
			<td>Trans</td>
			<td>Sender</td>
			<td>Receiver</td>
			<td>Required</td>
			<td>Filter</td>
			<td>Action</td>
			<td>Comment</td>
		</tr>
		
		
		<c:forEach items="${exchangeMapping.attributeList}" var="attr">
			<tr class="selectable">
				<td xmlns:field='rdm'><input type="text" value="${attr.rdm}" name="rdms"/></td>
				<td xmlns:field='pk'><input type="checkbox" <c:if test="${attr.primaryKey==true}">checked="checked"</c:if>/></td>
				<td xmlns:field='trans'><input type="checkbox" <c:if test="${attr.transactable==true}">checked="checked"</c:if>/></td>
				<td xmlns:field='sender'><select>
						<option value="COLUMN" <c:if test="${attr.senderType=='COLUMN'}">selected="selected"</c:if>>Column</option>
						<option value="DEFAULT" <c:if test="${attr.senderType=='DEFAULT'}">selected="selected"</c:if>>Default</option>
					</select>
					<input type="text" value="${attr.sender}" name="senders"/></td>
				<td xmlns:field='receiver'><input type="text" value="${attr.receiver}" name="receivers"/></td>
				<td xmlns:field='required'><input type="checkbox" <c:if test="${attr.required==true}">checked="checked"</c:if>/></td>
				<td xmlns:field='filter'><input type="text" value="${attr.filter}" name="filters"/></td>
				<td xmlns:field='action'><button type="button" onclick="removeAttr(this)">Remove</button></td>
				<td xmlns:field='comment'><input type="text" name="comments" value="${attr.comment}" name="comments"/></td>
			</tr>
		</c:forEach>
	</table>
	
		<button type="button" id="addAttr" onclick="newAttr()">New Attr</button>
	</div>
	
	</div>
	<button type="button" id="submitButton">Submit</button>
	<button type="button" onclick="location.href='/open/exchangeMapping'">Cancel</button></a>
	
</form:form>

<form method="post" action="/open/exchangeMapping/validate" id="validationForm">
<button type="button" id="validationButton">Validate</button>
<input type="hidden" name="id" value="${exchangeMapping.id}"/>
Sender:<input type="radio" name="target" value="Sender">Receiver<input type="radio" name="target" value="Receiver">
<textarea rows="5" cols="500" name="ifXml"></textarea>
</form>

</body>

